import  { useState } from 'react';
import { MuiTable } from './components';

interface DataType {
  name: string;
  age: number;
  address: string;
}

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
    sorter: true,
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
    sorter: true,
    render: (value: number) => `${value}岁`,
  },
  {
    title: '地址',
    dataIndex: 'address',
    key: 'address',
  },
];

const data: DataType[] = [
  { name: '张三', age: 20, address: '北京市朝阳区' },
  { name: '李四', age: 25, address: '上海市浦东新区' },
  { name: '王五', age: 30, address: '广州市天河区' },
];

function App() {
  const [loading, setLoading] = useState(false);
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 10,
    total: data.length,
  });

  const handlePaginationChange = (page: number, pageSize: number) => {
    setLoading(true);
    // 模拟加载
    setTimeout(() => {
      setPagination({ ...pagination, current: page, pageSize });
      setLoading(false);
    }, 500);
  };

  return (
    <div style={{ padding: 24 }}>
      <h1>MUI Table 组件示例</h1>
      <MuiTable<DataType>
        columns={columns}
        dataSource={data}
        loading={loading}
        pagination={{
          ...pagination,
          onChange: handlePaginationChange,
        }}
      />
    </div>
  );
}

export default App; 